<template>
  <view class="add-user-container">
    
    <view class="form-group">
      <text class="label">姓名 <text class="required">*</text></text>
      <input v-model="form.name" type="text" placeholder="请输入姓名" />
    </view>
    
    <view class="form-group">
      <text class="label">手机号 <text class="required">*</text></text>
      <input v-model="form.phone" type="number" placeholder="请输入手机号" />
    </view>
    
    <view class="form-group">
      <text class="label">性别</text>
      <view class="radio-group">
        <radio-group v-model="form.gender">
          <label>
            <radio value="1" />男
          </label>
          <label>
            <radio value="2" />女
          </label>
          <label>
            <radio value="0" />保密
          </label>
        </radio-group>
      </view>
    </view>
    
    <view class="form-group">
      <text class="label">家庭地址</text>
      <input v-model="form.address" type="text" placeholder="请输入家庭地址" />
    </view>
    
    <view class="form-group">
      <text class="label">角色 <text class="required">*</text></text>
      <picker v-model="form.role" :range="roleOptions" @change="onRoleChange" range-key="name">
        <view class="picker">
          {{ roleOptions[form.role].name || '请选择角色' }}
        </view>
      </picker>
    </view>
    
    <view class="form-actions">
      <button class="cancel-btn" @click="cancel">取消</button>
      <button class="save-btn" @click="saveUser">保存</button>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';

export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        gender: '0',
        address: '',
        role: 0
      },
      roleOptions: [
        { id: 'ROLE_ADMIN', name: '管理员1' },
        { id: 'ROLE_TEACHER', name: '老师' },
        { id: 'ROLE_USER', name: '学生' }
      ]
    }
  },
  onLoad() {
  	// 检查roleOptions是否正确加载
  	    console.log('角色选项:', this.roleOptions);
  },
  methods: {
    async saveUser() {
      if (!this.form.name) {
        uni.showToast({
          title: '姓名不能为空',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.phone) {
        uni.showToast({
          title: '手机号不能为空',
          icon: 'none'
        });
        return;
      }
      
      try {
        const res = await request.post('/api/users/saveUser', {
          name: this.form.name,
          phone: this.form.phone,
          sex: this.form.gender,
          address: this.form.address,
          role: this.roleOptions[this.form.role].id
        });
    
          uni.showToast({
            title: '用户添加成功',
            icon: 'success'
          });
          
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
       
      } catch (error) {
        console.error('添加用户错误:', error);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      }
    },
    onRoleChange(e) {
          // 打印选中索引，确认事件是否触发
          console.log('选中角色索引:', e.detail.value);
          // 更新form.role
          this.form.role = e.detail.value;
        },
    cancel() {
      uni.navigateBack();
    }
  }
}
</script>

<style>
.add-user-container {
  padding: 15px;
}

.form-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.required {
  color: #f56c6c;
}


uni-input{
	height: auto;
	min-height: 32px;
	  overflow: visible;
}

uni-input input {
  caret-color: #000; 
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none; /* 添加轮廓，确认输入框可点击 */
  -webkit-user-select: text;
  user-select: text;
}

.radio-group {
  display: flex;
  align-items: center;
}

.radio-group label {
  margin-right: 20px;
}

.picker {
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: white;
  pointer-events: auto; /* 确保可点击 */
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.cancel-btn {
  padding: 10px 20px;
  background-color: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 10px;
}

.save-btn {
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>